<!--
 * @author: Kate-sy
 * @create: 2021-06-23 16:01 PM
 * @license: MIT
 * @lastAuthor: Kate-sy
 * @lastEditTime: 2021-06-23 17:48 PM
 * @desc: 
-->
<template>
  <div class="auth-conter">
    <div class="authtop">🎖️作者榜</div>
    <div class="authitem" :key="ine" v-for="(item, ine) in authdata">
      <div class="authpho">
        <img :src="item.img" alt="" />
      </div>
      <div class="au-right">
        <section>
          <span>{{ item.anther }}</span>
          <div class="aulev">{{ item.lev }}</div>
        </section>
        <article>{{ item.desc }}</article>
      </div>
    </div>
    <div class="showmor">
      完整榜单
      <svg
        t="1624438130789"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2382"
        width="24"
        height="24"
      >
        <path
          d="M421.8 305.7l203.4 203.4-203.4 203.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l222.7-222.7c1.2-0.9 2.4-2 3.6-3.1 6.3-6.3 9.4-14.6 9.4-22.9 0.1-8.3-3.1-16.6-9.4-22.9-1.1-1.1-2.3-2.2-3.6-3.1L467.1 260.5c-12.5-12.5-32.8-12.5-45.3 0-12.4 12.5-12.4 32.7 0 45.2z"
          p-id="2383"
          fill="#599dff"
        ></path>
      </svg>
    </div>
    <div class="link-conter">
      <div class="linkitem" :key="item.img" v-for="item in linkdata">
        <div class="img">
          <img :src="item.img" alt="" />
        </div>
        <span>{{ item.desc }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Authoe",
  data() {
    return {
      linkdata: [
        {
          img: "https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/juejin-tutu.d58819c.png",
          desc: "掘金社区漫游指南",
        },
        {
          img: "https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/juejin-extension-icon.4b79fb4.png",
          desc: "下载掘金浏览器插件",
        },
        {
          img: "https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/juejin-miner.b78347c.png",
          desc: "前往掘金翻译计划",
        },
      ],
      authdata: [
        {
          img: "https://sf3-ttcdn-tos.pstatp.com/img/user-avatar/4524f00226f02696e6c4670d72aeb52b~300x300.image",
          anther: "望道同学",
          lev: "Lv3",
          desc: "🏆丹佛签约作者@.",
        },
        {
          img: "https://sf3-ttcdn-tos.pstatp.com/img/user-avatar/a1e5124fa1628730a01ed0aedd0bc129~300x300.image",
          anther: "ljiran",
          lev: "Lv2",
          desc: "非著名话痨艺术家@帝都",
        },
        {
          img: "https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/7bbdac90191b5bd0614aa8a79b5e502b~300x300.image",
          anther: "霜羽Hoarfroster",
          lev: "Lv3",
          desc: "PassionPenguin @绿色有",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.auth-conter {
  width: 240px;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: #fff;
  .authtop {
    padding: 12px 15px;
    border-bottom: 1px solid #f4f5f5;
    @include font(14px, #333);
  }
  .authitem {
    background-color: #fff;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    &:hover {
      cursor: pointer;
      background-color: #fbfbfb;
    }
    .authpho {
      width: 45px;
      height: 45px;
      border-radius: 100%;
      img {
        @extend .authpho;
      }
    }
    .au-right {
      margin-left: 10px;
      section {
        display: flex;
        align-items: center;
        @include font(14px, #333);
        .aulev {
          margin-left: 15px;
          padding: 0px 1px;
          height: 15px;
          align-items: center;
          display: flex;
          background-color: #599dff;
          @include font(13px, #fff, 700);
        }
      }
      article {
        @include font(12px, #909090);
        @include onerow();
      }
    }
  }
  .showmor {
    height: 17px;
    padding: 12px 0px;
    border-top: 1px solid hsla(0, 0%, 59.2%, 0.1);
    @include flex(center, center);
    @include font(14px, #599dff, 550);
    box-shadow: 0 3px 2px -2px rgb(228, 228, 228);
  }
  .link-conter {
    border-top: 15px solid #f4f5f5;
    .linkitem {
      padding: 12px;
      display: flex;
      align-items: center;
      &:hover {
        background-color: #fbfbfb;
        cursor: pointer;
      }
      .img {
        width: 36px;
        height: 36px;
        border-radius: 5px;
        margin-right: 10px;
        img {
          @extend .img;
        }
      }
      span {
        @include font(14px, #333);
      }
    }
  }
}
</style>